<template>
    
    <div class="swiper_foor">
      <ul>
        <li v-for="(item,index) in list " :key="index" @click="change(item.id)">
          <img :src="item.pic" alt="">
          <div class="swiper_positionz">
              <p>{{item.title}}</p>
              <p>{{item.descript}}</p>
          </div>
        </li>
      </ul>
    </div>
  
</template>
<script>
export default {
    data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$API
      .XQ()
      .then((res) => {
        console.log(res);
        this.list=res.data.data
      })
      .catch((error) => {
        console.log(error);
      });
  }, 
  methods: {
         change(id){
      this.$router.push({path:"/swipList",query:{id}})
    },
  },
}
</script>
<style scoped>

.swiper_foor {
  width: 100%;
  height: 6.2rem;
  margin-top: 1rem;
 
 
}
.swiper_foor>ul{
  width: 100%;
  height: 100%;
 
}
.swiper_foor>ul>li{
  width:100%;
  height: 100%;
position: relative;
}
.swiper_foor>ul>li>img{
  width: 100%;
  height: 100%;
}

.swiper_positionz{
position: absolute;
top: 130px;
}
.swiper_positionz>p{
 font-size: 0.3rem;
 color:white ;
}
</style>